<template>
    <div>
         <h1>会员显示页面</h1>
         
         <input type="text" placeholder="会员姓名" v-model="page.name">
         <input type="date" v-model="page.sdate">
         -
         <input type="date" v-model="page.edate">
         <input type="text" v-model="page.age">
         <input type="button" value="查询" @click="cha">
         <table class="table">
             <thead>
                 <tr>
                    <td>会员编号</td>
                    <td>会员姓名</td>
                    <td>会员年龄</td>
                    <td>会员性别</td>
                    <td>电话</td>
                    <td>状态</td>
                    <td>出生日期</td>
                 </tr>
             </thead>
             <tbody>
                <tr v-for="e in data">
                    <td>{{ e.id }}</td>
                    <td>{{ e.userName }}</td>
                    <td>{{ e.userAge }}</td>
                    <td>{{ e.sex==1?'男':'女' }}</td>
                    <td>{{ e.phone }}</td>
                    <td>{{ e.state?'启用':'禁用' }}</td>
                    <td>{{ moment(e.userDate).format("YYYY-MM-DD")}}</td>
                 </tr>
             </tbody>
         </table>
    </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue'
import axios from 'axios'
import moment from 'moment'
onMounted(()=>{
    show()
})

const cha=()=>{
    show();
}

const data= ref([{
    "id": 1,
    "userName": "张三",
    "userAge": 11,
    "sex": 1,
    "phone": "18295964858",
    "state": true,
    "userDate": "2025-04-22T00:00:00"
  }])
const page=ref({
    name:"",
    sdate:"",
    edate:"",
    age:0,
})

const show=()=>{
    axios.get("https://localhost:7086/api/Member/ShowUser",{params:data.value}).then(res=>{
        data.value=res.data
    })
}

</script>

<style scoped>

</style>